<script setup>
import { useStyleTag  } from '@vueuse/core'

import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router' // 导入 useRouter 钩子函数
import { useUserStore } from '@/stores';


useStyleTag(
  `@import 
  url("//at.alicdn.com/t/c/font_4833919_h3wd3db5h9.css");`,
  { id: 'iconfont_css_header' })// 唯一 ID 防止重复
const router = useRouter(); // 调用 useRouter 钩子函数
/* // 定义 props
const props = defineProps({
    user: {
        type: Object, // 类型为对象
        required: true, // 必传
        default: () => ({}) // 默认值（可选）
    }
}); */
//处理顶部滚动, 定义一个响应式变量来跟踪是否固定 header
const header = ref(null);
const show_slide_header = ref(false);
const handleScroll = () => {
  //   const n = document.documentElement.scrollTop;
  const rect = header.value.getBoundingClientRect();
  // console.log('Bottom:', rect.bottom);
  // show_slide_header.value = n >= main.value.offsetTop ? true : false;
  show_slide_header.value = rect.bottom < 0 ? true : false;
};
// 调用 useUserStore 函数获取 store 实例
const userStore = useUserStore();

const logout = () => {
  // 清除用户信息
  userStore.clearUser();

  // 跳转到登录页，假设登录页路由为 '/login'
  router.push('/login');
};
// 获取 user 变量
const user = userStore.user;



onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});



// 头像弹出框
const showAvatarPopover = ref(false)
//消息
const showMessagePopover = ref(false);

/* // 收起展开历史搜索展开面板
const isHistoryExpanded = ref(false)
const toggleHistoryExpand = () => {
  isHistoryExpanded.value = !isHistoryExpanded.value
}
//处理搜索面板展开
const showSearchPanel = ref(false)
const searchPanelRef = ref(null)

// 修改面板关闭逻辑
onClickOutside(searchPanelRef, () => {
  // debugger
  isHistoryExpanded.value = false
  showSearchPanel.value = false
})


// 处理点击搜索按钮
const historySearchList = ref(getHistoryList())
const searchText = ref('')
const goSearch = (keywords) => {
  // 跳转到搜索结果页
  if (keywords.trim() === '') {
    return
  }
  console.log('进行了搜索，搜索历史要更新', keywords);
  const index = historySearchList.value.indexOf(keywords);
  if (index !== -1) {
    // 存在相同的项，将原有关键字移除
    // splice(从哪开始，删除几个，项1，项2)
    historySearchList.value.splice(index, 1);
  }
  historySearchList.value.unshift(keywords);
  setHistoryList(historySearchList.value);
  // 跳转到搜索列表页
  // 新开窗口跳转到搜索列表页
  const routeUrl = router.resolve({
    path: '/searchList',
    query: {
      search: keywords
    }
  });
  window.open(routeUrl.href, '_blank');
}

const clearSearch = () => {
  historySearchList.value = []
  setHistoryList(historySearchList.value)
}
const deleteHistory = (index) => {
  historySearchList.value.splice(index, 1)
  setHistoryList(historySearchList.value)
}
 */
// console.log('historySearchList', historySearchList.value);
</script>

<template>
  <div class="bili_header" ref="header">

    <div :class="['header__bar',
      { 'slide_down': show_slide_header }]">

      <ul class="left_entry">

        <li class="homepage" v-show="show_slide_header === false">
          <router-link to="/" rel="noopener noreferrer">
            <i class="iconfont icon-shouye"></i>
            <span>首页</span>
          </router-link>
        </li>
        <li class="logo" v-show="show_slide_header">
          <h1>
            <router-link to="/" target="_blank" rel="noopener noreferrer">毕业生之家GradLink</router-link>
          </h1>
        </li>
        <!-- <li class="homepage" v-show="show_slide_header">
          <router-link to="/" rel="noopener noreferrer">
            <span>首页</span>
          </router-link>
        </li> -->

        
      </ul>


      <!--  <div class="center_search_container">
        <!~~ 搜索栏 ~~>
        <div class="center-search__bar"
        ref="searchPanelRef"
        >
          <form @submit.prevent class="nav-searchform " 
          :class="{ 'is-focus': showSearchPanel }"
          >
            <div class="nav-search-content">
              <input class="nav-search-input" 
              v-model.trim="searchText"
              type="text" autocomplete="off" accesskey="s" maxlength="100"
                x-webkit-speech=""
                 x-webkit-grammar="builtin:translate" value=""
                  placeholder="复旦大学生公开炫耀学历 结果被撒贝宁无情打脸"
                @focus="showSearchPanel = true"
                 @keyup.enter="goSearch(searchText)"
                >
                <!~~ 叉号 ~~>
              <div class="nav-search-clean " :class="{'has-keyword': searchText.trim()!==''}" @click="searchText=''">
                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M8 14.75C11.7279 14.75 14.75 11.7279 14.75 8C14.75 4.27208 11.7279 1.25 8 1.25C4.27208 1.25 1.25 4.27208 1.25 8C1.25 11.7279 4.27208 14.75 8 14.75ZM9.64999 5.64303C9.84525 5.44777 10.1618 5.44777 10.3571 5.64303C10.5524 5.83829 10.5524 6.15487 10.3571 6.35014L8.70718 8.00005L10.3571 9.64997C10.5524 9.84523 10.5524 10.1618 10.3571 10.3571C10.1618 10.5523 9.84525 10.5523 9.64999 10.3571L8.00007 8.70716L6.35016 10.3571C6.15489 10.5523 5.83831 10.5523 5.64305 10.3571C5.44779 10.1618 5.44779 9.84523 5.64305 9.64997L7.29296 8.00005L5.64305 6.35014C5.44779 6.15487 5.44779 5.83829 5.64305 5.64303C5.83831 5.44777 6.15489 5.44777 6.35016 5.64303L8.00007 7.29294L9.64999 5.64303Z"
                    fill="#C9CCD0">
                  </path>
                </svg>
              </div>
            </div>
            <div class="nav-search-btn" 
            @click="goSearch(searchText)"
            
            >
              <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M16.3451 15.2003C16.6377 15.4915 16.4752 15.772 16.1934 16.0632C16.15 16.1279 16.0958 16.1818 16.0525 16.2249C15.7707 16.473 15.4456 16.624 15.1854 16.3652L11.6848 12.8815C10.4709 13.8198 8.97529 14.3267 7.44714 14.3267C3.62134 14.3267 0.5 11.2314 0.5 7.41337C0.5 3.60616 3.6105 0.5 7.44714 0.5C11.2729 0.5 14.3943 3.59538 14.3943 7.41337C14.3943 8.98802 13.8524 10.5087 12.8661 11.7383L16.3451 15.2003ZM2.13647 7.4026C2.13647 10.3146 4.52083 12.6766 7.43624 12.6766C10.3517 12.6766 12.736 10.3146 12.736 7.4026C12.736 4.49058 10.3517 2.1286 7.43624 2.1286C4.50999 2.1286 2.13647 4.50136 2.13647 7.4026Z"
                  fill="currentColor">
                </path>
              </svg>
            </div>
          </form>
          <!~~ 历史记录面板 ~~>
          <div class="search_panel" v-show="showSearchPanel" @click.stop
          >
            <div class="history">
              <div class="header">
                <div class="title">搜索历史</div>
                <div class="clear" @click="clearSearch">清空</div>
              </div>
              <div class="histories-wrap" :style="{ maxHeight: isHistoryExpanded ? '172px' : '92px' }">
                <div class="histories">
                  <div class="history-item"  tabindex="0" v-for="(item, index) in historySearchList" :key="index">
                    <div class="history-text"@click="goSearch(item)" >{{item}}</div>
                    <div class="close" @click="deleteHistory(index)">
                      <svg viewBox="0 0 1024 1024" width="14" height="14">
                        <path d="M512 64.303538c-247.25636 0-447.696462 200.440102-447.696462 447.696462
                0 247.254314 200.440102 447.696462 447.696462 447.696462s447.696462-200.440102
                447.696462-447.696462S759.25636 64.303538 512 64.303538zM710.491727 665.266709c12.491499
                12.491499 12.489452 32.729425-0.002047 45.220924-6.246261 6.246261-14.429641 9.370415-22.611997
                9.370415s-16.363689-3.121084-22.60995-9.366322L512 557.222971 358.730221 710.491727
                c-6.246261 6.246261-14.429641 9.366322-22.611997 9.366322s-16.365736-3.125177-22.611997-9.370415
                c-12.491499-12.491499-12.491499-32.729425 0-45.220924l153.268756-153.266709L313.50725 358.730221
                c-12.491499-12.491499-12.489452-32.729425 0.002047-45.220924s32.729425-12.495592 45.220924-0.004093
                l153.268756 153.268756 153.268756-153.268756c12.491499-12.491499 32.729425-12.487406 45.220924
                0.004093s12.493545 32.729425 0.002047 45.220924L557.225017 512 710.491727 665.266709z"></path>
                      </svg>
                    </div>
                  </div>
             <!~~      <div class="history-item" tabindex="0">
                    <div class="history-text">中方稀土出口管制</div>
                    <div class="close"><svg viewBox="0 0 1024 1024" width="14" height="14">
                        <path d="M512 64.303538c-247.25636 0-447.696462 200.440102-447.696462 447.696462
                0 247.254314 200.440102 447.696462 447.696462 447.696462s447.696462-200.440102
                447.696462-447.696462S759.25636 64.303538 512 64.303538zM710.491727 665.266709c12.491499
                12.491499 12.489452 32.729425-0.002047 45.220924-6.246261 6.246261-14.429641 9.370415-22.611997
                9.370415s-16.363689-3.121084-22.60995-9.366322L512 557.222971 358.730221 710.491727
                c-6.246261 6.246261-14.429641 9.366322-22.611997 9.366322s-16.365736-3.125177-22.611997-9.370415
                c-12.491499-12.491499-12.491499-32.729425 0-45.220924l153.268756-153.266709L313.50725 358.730221
                c-12.491499-12.491499-12.489452-32.729425 0.002047-45.220924s32.729425-12.495592 45.220924-0.004093
                l153.268756 153.268756 153.268756-153.268756c12.491499-12.491499 32.729425-12.487406 45.220924
                0.004093s12.493545 32.729425 0.002047 45.220924L557.225017 512 710.491727 665.266709z"></path>
                      </svg></div>
                  </div>
                  <div class="history-item" tabindex="0">
                    <div class="history-text">csdn</div>
                    <div class="close"><svg viewBox="0 0 1024 1024" width="14" height="14">
                        <path d="M512 64.303538c-247.25636 0-447.696462 200.440102-447.696462 447.696462
                0 247.254314 200.440102 447.696462 447.696462 447.696462s447.696462-200.440102
                447.696462-447.696462S759.25636 64.303538 512 64.303538zM710.491727 665.266709c12.491499
                12.491499 12.489452 32.729425-0.002047 45.220924-6.246261 6.246261-14.429641 9.370415-22.611997
                9.370415s-16.363689-3.121084-22.60995-9.366322L512 557.222971 358.730221 710.491727
                c-6.246261 6.246261-14.429641 9.366322-22.611997 9.366322s-16.365736-3.125177-22.611997-9.370415
                c-12.491499-12.491499-12.491499-32.729425 0-45.220924l153.268756-153.266709L313.50725 358.730221
                c-12.491499-12.491499-12.489452-32.729425 0.002047-45.220924s32.729425-12.495592 45.220924-0.004093
                l153.268756 153.268756 153.268756-153.268756c12.491499-12.491499 32.729425-12.487406 45.220924
                0.004093s12.493545 32.729425 0.002047 45.220924L557.225017 512 710.491727 665.266709z"></path>
                      </svg></div>
                  </div>
                  <div class="history-item" tabindex="0">
                    <div class="history-text">小新pro16</div>
                    <div class="close"><svg viewBox="0 0 1024 1024" width="14" height="14">
                        <path d="M512 64.303538c-247.25636 0-447.696462 200.440102-447.696462 447.696462
                0 247.254314 200.440102 447.696462 447.696462 447.696462s447.696462-200.440102
                447.696462-447.696462S759.25636 64.303538 512 64.303538zM710.491727 665.266709c12.491499
                12.491499 12.489452 32.729425-0.002047 45.220924-6.246261 6.246261-14.429641 9.370415-22.611997
                9.370415s-16.363689-3.121084-22.60995-9.366322L512 557.222971 358.730221 710.491727
                c-6.246261 6.246261-14.429641 9.366322-22.611997 9.366322s-16.365736-3.125177-22.611997-9.370415
                c-12.491499-12.491499-12.491499-32.729425 0-45.220924l153.268756-153.266709L313.50725 358.730221
                c-12.491499-12.491499-12.489452-32.729425 0.002047-45.220924s32.729425-12.495592 45.220924-0.004093
                l153.268756 153.268756 153.268756-153.268756c12.491499-12.491499 32.729425-12.487406 45.220924
                0.004093s12.493545 32.729425 0.002047 45.220924L557.225017 512 710.491727 665.266709z"></path>
                      </svg></div>
                  </div>
                  <div class="history-item" tabindex="0">
                    <div class="history-text">springboot ik分词器下载安装</div>
                    <div class="close"><svg viewBox="0 0 1024 1024" width="14" height="14">
                        <path d="M512 64.303538c-247.25636 0-447.696462 200.440102-447.696462 447.696462
                0 247.254314 200.440102 447.696462 447.696462 447.696462s447.696462-200.440102
                447.696462-447.696462S759.25636 64.303538 512 64.303538zM710.491727 665.266709c12.491499
                12.491499 12.489452 32.729425-0.002047 45.220924-6.246261 6.246261-14.429641 9.370415-22.611997
                9.370415s-16.363689-3.121084-22.60995-9.366322L512 557.222971 358.730221 710.491727
                c-6.246261 6.246261-14.429641 9.366322-22.611997 9.366322s-16.365736-3.125177-22.611997-9.370415
                c-12.491499-12.491499-12.491499-32.729425 0-45.220924l153.268756-153.266709L313.50725 358.730221
                c-12.491499-12.491499-12.489452-32.729425 0.002047-45.220924s32.729425-12.495592 45.220924-0.004093
                l153.268756 153.268756 153.268756-153.268756c12.491499-12.491499 32.729425-12.487406 45.220924
                0.004093s12.493545 32.729425 0.002047 45.220924L557.225017 512 710.491727 665.266709z"></path>
                      </svg></div>
                  </div>
                  <div class="history-item" tabindex="0">
                    <div class="history-text">springbootik分词器下载安装</div>
                    <div class="close"><svg viewBox="0 0 1024 1024" width="14" height="14">
                        <path d="M512 64.303538c-247.25636 0-447.696462 200.440102-447.696462 447.696462
                0 247.254314 200.440102 447.696462 447.696462 447.696462s447.696462-200.440102
                447.696462-447.696462S759.25636 64.303538 512 64.303538zM710.491727 665.266709c12.491499
                12.491499 12.489452 32.729425-0.002047 45.220924-6.246261 6.246261-14.429641 9.370415-22.611997
                9.370415s-16.363689-3.121084-22.60995-9.366322L512 557.222971 358.730221 710.491727
                c-6.246261 6.246261-14.429641 9.366322-22.611997 9.366322s-16.365736-3.125177-22.611997-9.370415
                c-12.491499-12.491499-12.491499-32.729425 0-45.220924l153.268756-153.266709L313.50725 358.730221
                c-12.491499-12.491499-12.489452-32.729425 0.002047-45.220924s32.729425-12.495592 45.220924-0.004093
                l153.268756 153.268756 153.268756-153.268756c12.491499-12.491499 32.729425-12.487406 45.220924
                0.004093s12.493545 32.729425 0.002047 45.220924L557.225017 512 710.491727 665.266709z"></path>
                      </svg></div>
                  </div>
                  <div class="history-item" tabindex="0">
                    <div class="history-text">回答我原视频</div>
                    <div class="close"><svg viewBox="0 0 1024 1024" width="14" height="14">
                        <path d="M512 64.303538c-247.25636 0-447.696462 200.440102-447.696462 447.696462
                0 247.254314 200.440102 447.696462 447.696462 447.696462s447.696462-200.440102
                447.696462-447.696462S759.25636 64.303538 512 64.303538zM710.491727 665.266709c12.491499
                12.491499 12.489452 32.729425-0.002047 45.220924-6.246261 6.246261-14.429641 9.370415-22.611997
                9.370415s-16.363689-3.121084-22.60995-9.366322L512 557.222971 358.730221 710.491727
                c-6.246261 6.246261-14.429641 9.366322-22.611997 9.366322s-16.365736-3.125177-22.611997-9.370415
                c-12.491499-12.491499-12.491499-32.729425 0-45.220924l153.268756-153.266709L313.50725 358.730221
                c-12.491499-12.491499-12.489452-32.729425 0.002047-45.220924s32.729425-12.495592 45.220924-0.004093
                l153.268756 153.268756 153.268756-153.268756c12.491499-12.491499 32.729425-12.487406 45.220924
                0.004093s12.493545 32.729425 0.002047 45.220924L557.225017 512 710.491727 665.266709z"></path>
                      </svg></div>
                  </div>
                  <div class="history-item" tabindex="0">
                    <div class="history-text">普渡众生</div>
                    <div class="close"><svg viewBox="0 0 1024 1024" width="14" height="14">
                        <path d="M512 64.303538c-247.25636 0-447.696462 200.440102-447.696462 447.696462
                0 247.254314 200.440102 447.696462 447.696462 447.696462s447.696462-200.440102
                447.696462-447.696462S759.25636 64.303538 512 64.303538zM710.491727 665.266709c12.491499
                12.491499 12.489452 32.729425-0.002047 45.220924-6.246261 6.246261-14.429641 9.370415-22.611997
                9.370415s-16.363689-3.121084-22.60995-9.366322L512 557.222971 358.730221 710.491727
                c-6.246261 6.246261-14.429641 9.366322-22.611997 9.366322s-16.365736-3.125177-22.611997-9.370415
                c-12.491499-12.491499-12.491499-32.729425 0-45.220924l153.268756-153.266709L313.50725 358.730221
                c-12.491499-12.491499-12.489452-32.729425 0.002047-45.220924s32.729425-12.495592 45.220924-0.004093
                l153.268756 153.268756 153.268756-153.268756c12.491499-12.491499 32.729425-12.487406 45.220924
                0.004093s12.493545 32.729425 0.002047 45.220924L557.225017 512 710.491727 665.266709z"></path>
                      </svg></div>
                  </div>
                  <div class="history-item" tabindex="0">
                    <div class="history-text">武器α</div>
                    <div class="close"><svg viewBox="0 0 1024 1024" width="14" height="14">
                        <path d="M512 64.303538c-247.25636 0-447.696462 200.440102-447.696462 447.696462
                0 247.254314 200.440102 447.696462 447.696462 447.696462s447.696462-200.440102
                447.696462-447.696462S759.25636 64.303538 512 64.303538zM710.491727 665.266709c12.491499
                12.491499 12.489452 32.729425-0.002047 45.220924-6.246261 6.246261-14.429641 9.370415-22.611997
                9.370415s-16.363689-3.121084-22.60995-9.366322L512 557.222971 358.730221 710.491727
                c-6.246261 6.246261-14.429641 9.366322-22.611997 9.366322s-16.365736-3.125177-22.611997-9.370415
                c-12.491499-12.491499-12.491499-32.729425 0-45.220924l153.268756-153.266709L313.50725 358.730221
                c-12.491499-12.491499-12.489452-32.729425 0.002047-45.220924s32.729425-12.495592 45.220924-0.004093
                l153.268756 153.268756 153.268756-153.268756c12.491499-12.491499 32.729425-12.487406 45.220924
                0.004093s12.493545 32.729425 0.002047 45.220924L557.225017 512 710.491727 665.266709z"></path>
                      </svg></div>
                  </div>
                  <div class="history-item" tabindex="0">
                    <div class="history-text">强尼银手coser遇到甲亢哥</div>
                    <div class="close"><svg viewBox="0 0 1024 1024" width="14" height="14">
                        <path d="M512 64.303538c-247.25636 0-447.696462 200.440102-447.696462 447.696462
                0 247.254314 200.440102 447.696462 447.696462 447.696462s447.696462-200.440102
                447.696462-447.696462S759.25636 64.303538 512 64.303538zM710.491727 665.266709c12.491499
                12.491499 12.489452 32.729425-0.002047 45.220924-6.246261 6.246261-14.429641 9.370415-22.611997
                9.370415s-16.363689-3.121084-22.60995-9.366322L512 557.222971 358.730221 710.491727
                c-6.246261 6.246261-14.429641 9.366322-22.611997 9.366322s-16.365736-3.125177-22.611997-9.370415
                c-12.491499-12.491499-12.491499-32.729425 0-45.220924l153.268756-153.266709L313.50725 358.730221
                c-12.491499-12.491499-12.489452-32.729425 0.002047-45.220924s32.729425-12.495592 45.220924-0.004093
                l153.268756 153.268756 153.268756-153.268756c12.491499-12.491499 32.729425-12.487406 45.220924
                0.004093s12.493545 32.729425 0.002047 45.220924L557.225017 512 710.491727 665.266709z"></path>
                      </svg></div>
                  </div>
                  <div class="history-item" tabindex="0">
                    <div class="history-text">因为我们的关系—比亲兄弟…还要亲！</div>
                    <div class="close"><svg viewBox="0 0 1024 1024" width="14" height="14">
                        <path d="M512 64.303538c-247.25636 0-447.696462 200.440102-447.696462 447.696462
                0 247.254314 200.440102 447.696462 447.696462 447.696462s447.696462-200.440102
                447.696462-447.696462S759.25636 64.303538 512 64.303538zM710.491727 665.266709c12.491499
                12.491499 12.489452 32.729425-0.002047 45.220924-6.246261 6.246261-14.429641 9.370415-22.611997
                9.370415s-16.363689-3.121084-22.60995-9.366322L512 557.222971 358.730221 710.491727
                c-6.246261 6.246261-14.429641 9.366322-22.611997 9.366322s-16.365736-3.125177-22.611997-9.370415
                c-12.491499-12.491499-12.491499-32.729425 0-45.220924l153.268756-153.266709L313.50725 358.730221
                c-12.491499-12.491499-12.489452-32.729425 0.002047-45.220924s32.729425-12.495592 45.220924-0.004093
                l153.268756 153.268756 153.268756-153.268756c12.491499-12.491499 32.729425-12.487406 45.220924
                0.004093s12.493545 32.729425 0.002047 45.220924L557.225017 512 710.491727 665.266709z"></path>
                      </svg></div>
                  </div>
                  <div class="history-item" tabindex="0">
                    <div class="history-text">aa72</div>
                    <div class="close"><svg viewBox="0 0 1024 1024" width="14" height="14">
                        <path d="M512 64.303538c-247.25636 0-447.696462 200.440102-447.696462 447.696462
                0 247.254314 200.440102 447.696462 447.696462 447.696462s447.696462-200.440102
                447.696462-447.696462S759.25636 64.303538 512 64.303538zM710.491727 665.266709c12.491499
                12.491499 12.489452 32.729425-0.002047 45.220924-6.246261 6.246261-14.429641 9.370415-22.611997
                9.370415s-16.363689-3.121084-22.60995-9.366322L512 557.222971 358.730221 710.491727
                c-6.246261 6.246261-14.429641 9.366322-22.611997 9.366322s-16.365736-3.125177-22.611997-9.370415
                c-12.491499-12.491499-12.491499-32.729425 0-45.220924l153.268756-153.266709L313.50725 358.730221
                c-12.491499-12.491499-12.489452-32.729425 0.002047-45.220924s32.729425-12.495592 45.220924-0.004093
                l153.268756 153.268756 153.268756-153.268756c12.491499-12.491499 32.729425-12.487406 45.220924
                0.004093s12.493545 32.729425 0.002047 45.220924L557.225017 512 710.491727 665.266709z"></path>
                      </svg></div>
                  </div>
                  <div class="history-item" tabindex="0">
                    <div class="history-text">dasdsa</div>
                    <div class="close"><svg viewBox="0 0 1024 1024" width="14" height="14">
                        <path d="M512 64.303538c-247.25636 0-447.696462 200.440102-447.696462 447.696462
                0 247.254314 200.440102 447.696462 447.696462 447.696462s447.696462-200.440102
                447.696462-447.696462S759.25636 64.303538 512 64.303538zM710.491727 665.266709c12.491499
                12.491499 12.489452 32.729425-0.002047 45.220924-6.246261 6.246261-14.429641 9.370415-22.611997
                9.370415s-16.363689-3.121084-22.60995-9.366322L512 557.222971 358.730221 710.491727
                c-6.246261 6.246261-14.429641 9.366322-22.611997 9.366322s-16.365736-3.125177-22.611997-9.370415
                c-12.491499-12.491499-12.491499-32.729425 0-45.220924l153.268756-153.266709L313.50725 358.730221
                c-12.491499-12.491499-12.489452-32.729425 0.002047-45.220924s32.729425-12.495592 45.220924-0.004093
                l153.268756 153.268756 153.268756-153.268756c12.491499-12.491499 32.729425-12.487406 45.220924
                0.004093s12.493545 32.729425 0.002047 45.220924L557.225017 512 710.491727 665.266709z"></path>
                      </svg></div>
                  </div>
                  <div class="history-item" tabindex="0">
                    <div class="history-text">中国政府关于反对美滥施关税的立场</div>
                    <div class="close"><svg viewBox="0 0 1024 1024" width="14" height="14">
                        <path d="M512 64.303538c-247.25636 0-447.696462 200.440102-447.696462 447.696462
                0 247.254314 200.440102 447.696462 447.696462 447.696462s447.696462-200.440102
                447.696462-447.696462S759.25636 64.303538 512 64.303538zM710.491727 665.266709c12.491499
                12.491499 12.489452 32.729425-0.002047 45.220924-6.246261 6.246261-14.429641 9.370415-22.611997
                9.370415s-16.363689-3.121084-22.60995-9.366322L512 557.222971 358.730221 710.491727
                c-6.246261 6.246261-14.429641 9.366322-22.611997 9.366322s-16.365736-3.125177-22.611997-9.370415
                c-12.491499-12.491499-12.491499-32.729425 0-45.220924l153.268756-153.266709L313.50725 358.730221
                c-12.491499-12.491499-12.489452-32.729425 0.002047-45.220924s32.729425-12.495592 45.220924-0.004093
                l153.268756 153.268756 153.268756-153.268756c12.491499-12.491499 32.729425-12.487406 45.220924
                0.004093s12.493545 32.729425 0.002047 45.220924L557.225017 512 710.491727 665.266709z"></path>
                      </svg></div>
                  </div>
                  <div class="history-item" tabindex="0">
                    <div class="history-text">Speed见到麦克阿瑟</div>
                    <div class="close"><svg viewBox="0 0 1024 1024" width="14" height="14">
                        <path d="M512 64.303538c-247.25636 0-447.696462 200.440102-447.696462 447.696462
                0 247.254314 200.440102 447.696462 447.696462 447.696462s447.696462-200.440102
                447.696462-447.696462S759.25636 64.303538 512 64.303538zM710.491727 665.266709c12.491499
                12.491499 12.489452 32.729425-0.002047 45.220924-6.246261 6.246261-14.429641 9.370415-22.611997
                9.370415s-16.363689-3.121084-22.60995-9.366322L512 557.222971 358.730221 710.491727
                c-6.246261 6.246261-14.429641 9.366322-22.611997 9.366322s-16.365736-3.125177-22.611997-9.370415
                c-12.491499-12.491499-12.491499-32.729425 0-45.220924l153.268756-153.266709L313.50725 358.730221
                c-12.491499-12.491499-12.489452-32.729425 0.002047-45.220924s32.729425-12.495592 45.220924-0.004093
                l153.268756 153.268756 153.268756-153.268756c12.491499-12.491499 32.729425-12.487406 45.220924
                0.004093s12.493545 32.729425 0.002047 45.220924L557.225017 512 710.491727 665.266709z"></path>
                      </svg></div>
                  </div>
                  <div class="history-item" tabindex="0">
                    <div class="history-text">梅根2.0发布新预告</div>
                    <div class="close"><svg viewBox="0 0 1024 1024" width="14" height="14">
                        <path d="M512 64.303538c-247.25636 0-447.696462 200.440102-447.696462 447.696462
                0 247.254314 200.440102 447.696462 447.696462 447.696462s447.696462-200.440102
                447.696462-447.696462S759.25636 64.303538 512 64.303538zM710.491727 665.266709c12.491499
                12.491499 12.489452 32.729425-0.002047 45.220924-6.246261 6.246261-14.429641 9.370415-22.611997
                9.370415s-16.363689-3.121084-22.60995-9.366322L512 557.222971 358.730221 710.491727
                c-6.246261 6.246261-14.429641 9.366322-22.611997 9.366322s-16.365736-3.125177-22.611997-9.370415
                c-12.491499-12.491499-12.491499-32.729425 0-45.220924l153.268756-153.266709L313.50725 358.730221
                c-12.491499-12.491499-12.489452-32.729425 0.002047-45.220924s32.729425-12.495592 45.220924-0.004093
                l153.268756 153.268756 153.268756-153.268756c12.491499-12.491499 32.729425-12.487406 45.220924
                0.004093s12.493545 32.729425 0.002047 45.220924L557.225017 512 710.491727 665.266709z"></path>
                      </svg></div>
                  </div>
                  <div class="history-item" tabindex="0">
                    <div class="history-text">csdn页面</div>
                    <div class="close"><svg viewBox="0 0 1024 1024" width="14" height="14">
                        <path d="M512 64.303538c-247.25636 0-447.696462 200.440102-447.696462 447.696462
                0 247.254314 200.440102 447.696462 447.696462 447.696462s447.696462-200.440102
                447.696462-447.696462S759.25636 64.303538 512 64.303538zM710.491727 665.266709c12.491499
                12.491499 12.489452 32.729425-0.002047 45.220924-6.246261 6.246261-14.429641 9.370415-22.611997
                9.370415s-16.363689-3.121084-22.60995-9.366322L512 557.222971 358.730221 710.491727
                c-6.246261 6.246261-14.429641 9.366322-22.611997 9.366322s-16.365736-3.125177-22.611997-9.370415
                c-12.491499-12.491499-12.491499-32.729425 0-45.220924l153.268756-153.266709L313.50725 358.730221
                c-12.491499-12.491499-12.489452-32.729425 0.002047-45.220924s32.729425-12.495592 45.220924-0.004093
                l153.268756 153.268756 153.268756-153.268756c12.491499-12.491499 32.729425-12.487406 45.220924
                0.004093s12.493545 32.729425 0.002047 45.220924L557.225017 512 710.491727 665.266709z"></path>
                      </svg></div>
                  </div>
                  <div class="history-item" tabindex="0">
                    <div class="history-text">csdn官网页面</div>
                    <div class="close"><svg viewBox="0 0 1024 1024" width="14" height="14">
                        <path d="M512 64.303538c-247.25636 0-447.696462 200.440102-447.696462 447.696462
                0 247.254314 200.440102 447.696462 447.696462 447.696462s447.696462-200.440102
                447.696462-447.696462S759.25636 64.303538 512 64.303538zM710.491727 665.266709c12.491499
                12.491499 12.489452 32.729425-0.002047 45.220924-6.246261 6.246261-14.429641 9.370415-22.611997
                9.370415s-16.363689-3.121084-22.60995-9.366322L512 557.222971 358.730221 710.491727
                c-6.246261 6.246261-14.429641 9.366322-22.611997 9.366322s-16.365736-3.125177-22.611997-9.370415
                c-12.491499-12.491499-12.491499-32.729425 0-45.220924l153.268756-153.266709L313.50725 358.730221
                c-12.491499-12.491499-12.489452-32.729425 0.002047-45.220924s32.729425-12.495592 45.220924-0.004093
                l153.268756 153.268756 153.268756-153.268756c12.491499-12.491499 32.729425-12.487406 45.220924
                0.004093s12.493545 32.729425 0.002047 45.220924L557.225017 512 710.491727 665.266709z"></path>
                      </svg></div>
                  </div>
                  <div class="history-item" tabindex="0">
                    <div class="history-text">IT老齐mysql全文索引</div>
                    <div class="close"><svg viewBox="0 0 1024 1024" width="14" height="14">
                        <path d="M512 64.303538c-247.25636 0-447.696462 200.440102-447.696462 447.696462
                0 247.254314 200.440102 447.696462 447.696462 447.696462s447.696462-200.440102
                447.696462-447.696462S759.25636 64.303538 512 64.303538zM710.491727 665.266709c12.491499
                12.491499 12.489452 32.729425-0.002047 45.220924-6.246261 6.246261-14.429641 9.370415-22.611997
                9.370415s-16.363689-3.121084-22.60995-9.366322L512 557.222971 358.730221 710.491727
                c-6.246261 6.246261-14.429641 9.366322-22.611997 9.366322s-16.365736-3.125177-22.611997-9.370415
                c-12.491499-12.491499-12.491499-32.729425 0-45.220924l153.268756-153.266709L313.50725 358.730221
                c-12.491499-12.491499-12.489452-32.729425 0.002047-45.220924s32.729425-12.495592 45.220924-0.004093
                l153.268756 153.268756 153.268756-153.268756c12.491499-12.491499 32.729425-12.487406 45.220924
                0.004093s12.493545 32.729425 0.002047 45.220924L557.225017 512 710.491727 665.266709z"></path>
                      </svg></div>
                  </div>
                  <div class="history-item" tabindex="0">
                    <div class="history-text">现在这些免费的大模型靠什么赚钱</div>
                    <div class="close"><svg viewBox="0 0 1024 1024" width="14" height="14">
                        <path d="M512 64.303538c-247.25636 0-447.696462 200.440102-447.696462 447.696462
                0 247.254314 200.440102 447.696462 447.696462 447.696462s447.696462-200.440102
                447.696462-447.696462S759.25636 64.303538 512 64.303538zM710.491727 665.266709c12.491499
                12.491499 12.489452 32.729425-0.002047 45.220924-6.246261 6.246261-14.429641 9.370415-22.611997
                9.370415s-16.363689-3.121084-22.60995-9.366322L512 557.222971 358.730221 710.491727
                c-6.246261 6.246261-14.429641 9.366322-22.611997 9.366322s-16.365736-3.125177-22.611997-9.370415
                c-12.491499-12.491499-12.491499-32.729425 0-45.220924l153.268756-153.266709L313.50725 358.730221
                c-12.491499-12.491499-12.489452-32.729425 0.002047-45.220924s32.729425-12.495592 45.220924-0.004093
                l153.268756 153.268756 153.268756-153.268756c12.491499-12.491499 32.729425-12.487406 45.220924
                0.004093s12.493545 32.729425 0.002047 45.220924L557.225017 512 710.491727 665.266709z"></path>
                      </svg></div>
                  </div> ~~>
                </div>
              </div>
              <div class="history-fold-wrap" @click.stop="toggleHistoryExpand">
                <div class="fold-text">{{ isHistoryExpanded ? '收起' : '展开更多' }}</div>
                <svg class="fold-icon " :class="{ fold: isHistoryExpanded === false }" viewBox="0 0 12 12">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.46967 9.17678C5.76256 9.46967 6.23744 9.46967 6.53033 9.17678L10.7286 4.97855
              C10.9238 4.78329 10.9238 4.46671 10.7286 4.27145C10.5333 4.07618 10.2167 4.07618 10.0214 4.27145L6 8.29289
              L1.97855 4.27145C1.78329 4.07618 1.46671 4.07618 1.27145 4.27145
              C1.07618 4.46671 1.07618 4.78329 1.27145 4.97855L5.46967 9.17678Z"></path>
                </svg>
              </div>
            </div>
          </div>
        </div>

      </div>-->


      <ul class="right_entry">
        <!-- 头像 -->
        <!-- <li class="v-popover-wrap header-avatar-wrap"
                 @mouseenter="handleAvatarEnter"
                    @mouseleave="handleAvatarLeave"> -->
        <li class="v-popover-wrap header-avatar-wrap" @mouseenter="showAvatarPopover = true"
          @mouseleave="showAvatarPopover = false">

          <div
            :class="{ 'header-avatar-wrap--container': true, 'mini-avatar--small': !showAvatarPopover, 'mini-avatar--large': showAvatarPopover }">

            <router-link class="header-entry-mini"  :to="`/my-space/${user.userId}`"   target="_blank" rel="noopener noreferrer">
              <img :src="user.avatarUrl" alt="">
            </router-link>
            <router-link class="header-entry-avatar"  :to="`/my-space/${user.userId}`"  target="_blank" rel="noopener noreferrer">
              <div class="bili-avatar">
                <img class="bili_avatar_img" :src="user.avatarUrl" alt="">
              </div>
            </router-link>
          </div>
          <div class="v-popover avatar-popover-is-bottom" v-show="showAvatarPopover">
            <!-- <div class="v-popover avatar-popover-is-bottom"
                     @mouseenter="clearCloseTimer"
                    @mouseleave="startCloseTimer" 
                        v-show="showAvatarPopover"
                         > -->


            <div class="v-popover-content">
              <div class="avatar-panel-popover">

                <!-- 顶部留出空间给半个大头像占位 -->
                <div class="avatar-top-space"></div>
                <!-- 显示昵称 -->
                <div class="user-nickname">{{ user.nickName }}</div>
                <!-- 导航列表 -->
                <ul class="links-item">
                  <router-link class="single-link-item" to="/user-center" target="_blank" rel="noopener noreferrer">
                    <div class="link-title">
                      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"
                        class="link-icon">
                        <rect opacity="0.01" width="18" height="18" fill="white"></rect>
                        <path
                          d="M12.1146 9.48983C13.2763 8.63331 14.0299 7.2548 14.0299 5.7035C14.0299 3.11005 11.9198 1 9.32636 1C6.73291 1 4.62286 3.11005 4.62286 5.7035C4.62286 7.2548 5.37829 8.63331 6.53808 9.48983C3.87662 10.589 2 13.2118 2 16.2648C2 16.671 2.32901 17 2.73521 17C3.14141 17 3.47042 16.671 3.47042 16.2648C3.47042 13.0335 6.09879 10.407 9.3282 10.407C12.5576 10.407 15.186 13.0354 15.186 16.2648C15.186 16.671 15.515 17 15.9212 17C16.3274 17 16.6564 16.671 16.6564 16.2648C16.6546 13.2118 14.7761 10.589 12.1146 9.48983ZM6.09144 5.7035C6.09144 3.91878 7.54348 2.46858 9.32636 2.46858C11.1092 2.46858 12.5613 3.92062 12.5613 5.7035C12.5613 7.48639 11.1092 8.93843 9.32636 8.93843C7.54348 8.93843 6.09144 7.48639 6.09144 5.7035Z"
                          fill="#61666d"></path>
                      </svg>
                      <span>个人中心</span>
                    </div>
                    <svg width="10" height="10" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg"
                      class="link-icon--right">
                      <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M7.50588 3.40623C7.40825 3.3086 7.24996 3.3086 7.15232 3.40623L4.41244 6.14612L1.67255 3.40623C1.57491 3.3086 1.41662 3.3086 1.31899 3.40623C1.22136 3.50386 1.22136 3.66215 1.31899 3.75978L4.11781 6.5586C4.28053 6.72132 4.54434 6.72132 4.70706 6.5586L7.50588 3.75978C7.60351 3.66215 7.60351 3.50386 7.50588 3.40623Z"
                        fill="currentColor"></path>
                      <path
                        d="M7.15232 3.40623L7.50588 3.75978L7.50588 3.75978L7.15232 3.40623ZM7.50588 3.40623L7.15232 3.75978L7.15233 3.75978L7.50588 3.40623ZM4.41244 6.14612L4.05888 6.49967C4.15265 6.59344 4.27983 6.64612 4.41244 6.64612C4.54504 6.64612 4.67222 6.59344 4.76599 6.49967L4.41244 6.14612ZM1.67255 3.40623L2.0261 3.05268L2.0261 3.05268L1.67255 3.40623ZM1.31899 3.40623L0.965439 3.05268L0.965439 3.05268L1.31899 3.40623ZM1.31899 3.75978L1.67255 3.40623V3.40623L1.31899 3.75978ZM4.11781 6.5586L3.76425 6.91215L4.11781 6.5586ZM4.70706 6.5586L4.35351 6.20505L4.70706 6.5586ZM7.50588 3.75978L7.15233 3.40623L7.15232 3.40623L7.50588 3.75978ZM7.50588 3.75978C7.40825 3.85742 7.24996 3.85742 7.15232 3.75978L7.85943 3.05268C7.56654 2.75978 7.09166 2.75978 6.79877 3.05268L7.50588 3.75978ZM4.76599 6.49967L7.50588 3.75978L6.79877 3.05268L4.05888 5.79257L4.76599 6.49967ZM1.31899 3.75978L4.05888 6.49967L4.76599 5.79257L2.0261 3.05268L1.31899 3.75978ZM1.67254 3.75979C1.57491 3.85742 1.41662 3.85742 1.31899 3.75979L2.0261 3.05268C1.73321 2.75978 1.25833 2.75978 0.965439 3.05268L1.67254 3.75979ZM1.67255 3.40623C1.77018 3.50386 1.77018 3.66215 1.67255 3.75978L0.965439 3.05268C0.672546 3.34557 0.672546 3.82044 0.965439 4.11334L1.67255 3.40623ZM4.47136 6.20505L1.67255 3.40623L0.965439 4.11334L3.76425 6.91215L4.47136 6.20505ZM4.35351 6.20505C4.38605 6.1725 4.43882 6.1725 4.47136 6.20505L3.76425 6.91215C4.12223 7.27013 4.70264 7.27013 5.06062 6.91215L4.35351 6.20505ZM7.15232 3.40623L4.35351 6.20505L5.06062 6.91215L7.85943 4.11334L7.15232 3.40623ZM7.15233 3.75978C7.05469 3.66215 7.05469 3.50386 7.15233 3.40623L7.85943 4.11334C8.15233 3.82045 8.15233 3.34557 7.85943 3.05268L7.15233 3.75978Z"
                        fill="currentColor"></path>
                    </svg>
                  </router-link>
                  <router-link class="single-link-item" to="/activity-manage" target="_blank" rel="noopener noreferrer">
                    <div class="link-title">

                      <i class="iconfont icon-huodong_huodongguanli link-icon"></i>
                      <span>活动管理</span>
                    </div>
                    <svg width="10" height="10" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg"
                      class="link-icon--right">
                      <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M7.50588 3.40623C7.40825 3.3086 7.24996 3.3086 7.15232 3.40623L4.41244 6.14612L1.67255 3.40623C1.57491 3.3086 1.41662 3.3086 1.31899 3.40623C1.22136 3.50386 1.22136 3.66215 1.31899 3.75978L4.11781 6.5586C4.28053 6.72132 4.54434 6.72132 4.70706 6.5586L7.50588 3.75978C7.60351 3.66215 7.60351 3.50386 7.50588 3.40623Z"
                        fill="currentColor"></path>
                      <path
                        d="M7.15232 3.40623L7.50588 3.75978L7.50588 3.75978L7.15232 3.40623ZM7.50588 3.40623L7.15232 3.75978L7.15233 3.75978L7.50588 3.40623ZM4.41244 6.14612L4.05888 6.49967C4.15265 6.59344 4.27983 6.64612 4.41244 6.64612C4.54504 6.64612 4.67222 6.59344 4.76599 6.49967L4.41244 6.14612ZM1.67255 3.40623L2.0261 3.05268L2.0261 3.05268L1.67255 3.40623ZM1.31899 3.40623L0.965439 3.05268L0.965439 3.05268L1.31899 3.40623ZM1.31899 3.75978L1.67255 3.40623V3.40623L1.31899 3.75978ZM4.11781 6.5586L3.76425 6.91215L4.11781 6.5586ZM4.70706 6.5586L4.35351 6.20505L4.70706 6.5586ZM7.50588 3.75978L7.15233 3.40623L7.15232 3.40623L7.50588 3.75978ZM7.50588 3.75978C7.40825 3.85742 7.24996 3.85742 7.15232 3.75978L7.85943 3.05268C7.56654 2.75978 7.09166 2.75978 6.79877 3.05268L7.50588 3.75978ZM4.76599 6.49967L7.50588 3.75978L6.79877 3.05268L4.05888 5.79257L4.76599 6.49967ZM1.31899 3.75978L4.05888 6.49967L4.76599 5.79257L2.0261 3.05268L1.31899 3.75978ZM1.67254 3.75979C1.57491 3.85742 1.41662 3.85742 1.31899 3.75979L2.0261 3.05268C1.73321 2.75978 1.25833 2.75978 0.965439 3.05268L1.67254 3.75979ZM1.67255 3.40623C1.77018 3.50386 1.77018 3.66215 1.67255 3.75978L0.965439 3.05268C0.672546 3.34557 0.672546 3.82044 0.965439 4.11334L1.67255 3.40623ZM4.47136 6.20505L1.67255 3.40623L0.965439 4.11334L3.76425 6.91215L4.47136 6.20505ZM4.35351 6.20505C4.38605 6.1725 4.43882 6.1725 4.47136 6.20505L3.76425 6.91215C4.12223 7.27013 4.70264 7.27013 5.06062 6.91215L4.35351 6.20505ZM7.15232 3.40623L4.35351 6.20505L5.06062 6.91215L7.85943 4.11334L7.15232 3.40623ZM7.15233 3.75978C7.05469 3.66215 7.05469 3.50386 7.15233 3.40623L7.85943 4.11334C8.15233 3.82045 8.15233 3.34557 7.85943 3.05268L7.15233 3.75978Z"
                        fill="currentColor"></path>
                    </svg>
                  </router-link>
                  <router-link class="single-link-item" to="/activity-manage/my-registrations" target="_blank"
                    rel="noopener noreferrer">
                    <div class="link-title">

                      <i class="iconfont icon-wodebaoming1 link-icon"></i>
                      <span>我的报名</span>
                    </div>
                    <svg width="10" height="10" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg"
                      class="link-icon--right">
                      <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M7.50588 3.40623C7.40825 3.3086 7.24996 3.3086 7.15232 3.40623L4.41244 6.14612L1.67255 3.40623C1.57491 3.3086 1.41662 3.3086 1.31899 3.40623C1.22136 3.50386 1.22136 3.66215 1.31899 3.75978L4.11781 6.5586C4.28053 6.72132 4.54434 6.72132 4.70706 6.5586L7.50588 3.75978C7.60351 3.66215 7.60351 3.50386 7.50588 3.40623Z"
                        fill="currentColor"></path>
                      <path
                        d="M7.15232 3.40623L7.50588 3.75978L7.50588 3.75978L7.15232 3.40623ZM7.50588 3.40623L7.15232 3.75978L7.15233 3.75978L7.50588 3.40623ZM4.41244 6.14612L4.05888 6.49967C4.15265 6.59344 4.27983 6.64612 4.41244 6.64612C4.54504 6.64612 4.67222 6.59344 4.76599 6.49967L4.41244 6.14612ZM1.67255 3.40623L2.0261 3.05268L2.0261 3.05268L1.67255 3.40623ZM1.31899 3.40623L0.965439 3.05268L0.965439 3.05268L1.31899 3.40623ZM1.31899 3.75978L1.67255 3.40623V3.40623L1.31899 3.75978ZM4.11781 6.5586L3.76425 6.91215L4.11781 6.5586ZM4.70706 6.5586L4.35351 6.20505L4.70706 6.5586ZM7.50588 3.75978L7.15233 3.40623L7.15232 3.40623L7.50588 3.75978ZM7.50588 3.75978C7.40825 3.85742 7.24996 3.85742 7.15232 3.75978L7.85943 3.05268C7.56654 2.75978 7.09166 2.75978 6.79877 3.05268L7.50588 3.75978ZM4.76599 6.49967L7.50588 3.75978L6.79877 3.05268L4.05888 5.79257L4.76599 6.49967ZM1.31899 3.75978L4.05888 6.49967L4.76599 5.79257L2.0261 3.05268L1.31899 3.75978ZM1.67254 3.75979C1.57491 3.85742 1.41662 3.85742 1.31899 3.75979L2.0261 3.05268C1.73321 2.75978 1.25833 2.75978 0.965439 3.05268L1.67254 3.75979ZM1.67255 3.40623C1.77018 3.50386 1.77018 3.66215 1.67255 3.75978L0.965439 3.05268C0.672546 3.34557 0.672546 3.82044 0.965439 4.11334L1.67255 3.40623ZM4.47136 6.20505L1.67255 3.40623L0.965439 4.11334L3.76425 6.91215L4.47136 6.20505ZM4.35351 6.20505C4.38605 6.1725 4.43882 6.1725 4.47136 6.20505L3.76425 6.91215C4.12223 7.27013 4.70264 7.27013 5.06062 6.91215L4.35351 6.20505ZM7.15232 3.40623L4.35351 6.20505L5.06062 6.91215L7.85943 4.11334L7.15232 3.40623ZM7.15233 3.75978C7.05469 3.66215 7.05469 3.50386 7.15233 3.40623L7.85943 4.11334C8.15233 3.82045 8.15233 3.34557 7.85943 3.05268L7.15233 3.75978Z"
                        fill="currentColor"></path>
                    </svg>
                  </router-link>
                  <div class="split-line"></div>
                  <div class="logout-item" @click.prevent="logout">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"
                      class="link-icon">
                      <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M17.6137 9.30115C17.6932 9.10837 17.6932 8.89282 17.6137 8.70004C17.5743 8.60393 17.5165 8.51726 17.4443 8.44504L15.2221 6.22282C14.9148 5.9156 14.4176 5.91615 14.111 6.22282C13.8043 6.52948 13.8037 7.02671 14.111 7.33393L14.9921 8.21504L7.99985 8.21504C7.56596 8.21448 7.21429 8.56615 7.21429 9.00059C7.21429 9.21726 7.30207 9.41393 7.44429 9.55615C7.58651 9.69837 7.78318 9.78615 7.99985 9.78615L14.9921 9.78615L14.111 10.6673C13.8043 10.9739 13.8037 11.4712 14.111 11.7784C14.4182 12.0856 14.9154 12.085 15.2221 11.7784L17.4443 9.55615C17.5165 9.48393 17.5743 9.39726 17.6137 9.30115"
                        fill="#61666d">
                      </path>
                      <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M11.8889 5.11111C9.74127 2.96349 6.25873 2.96349 4.11111 5.11111C1.96349 7.25873 1.96349 10.7413 4.11111 12.8889C6.25873 15.0365 9.74127 15.0365 11.8889 12.8889C12.1957 12.5821 12.6932 12.5821 13 12.8889C13.3068 13.1957 13.3068 13.6932 13 14C10.2387 16.7613 5.76127 16.7613 3 14C0.238731 11.2387 0.23873 6.76127 3 4C5.76127 1.23873 10.2387 1.23873 13 4C13.3068 4.30683 13.3068 4.80429 13 5.11111C12.6932 5.41794 12.1957 5.41794 11.8889 5.11111Z"
                        fill="#61666d">
                      </path>
                    </svg>
                    <span>退出登录</span>
                  </div>
                </ul>
              </div>

            </div>
          </div>
        </li>
        <!-- 消息 -->
        <li class="v-popover-wrap 
                right-entry--message 
                right-entry__outside" @mouseenter="showMessagePopover = true" @mouseleave="showMessagePopover = false">
          <div class="red-num--message">2</div>
          <router-link title="消息中心" to="/message-center/replies" target="_blank" class="right-entry__outside">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"
              class="right-entry-icon">
              <path
                d="M15.435 17.7717H4.567C2.60143 17.7717 1 16.1723 1 14.2047V5.76702C1 3.80144 2.59942 2.20001 4.567 2.20001H15.433C17.3986 2.20001 19 3.79943 19 5.76702V14.2047C19.002 16.1703 17.4006 17.7717 15.435 17.7717ZM4.567 4.00062C3.59327 4.00062 2.8006 4.79328 2.8006 5.76702V14.2047C2.8006 15.1784 3.59327 15.9711 4.567 15.9711H15.433C16.4067 15.9711 17.1994 15.1784 17.1994 14.2047V5.76702C17.1994 4.79328 16.4067 4.00062 15.433 4.00062H4.567Z"
                fill="currentColor"></path>
              <path
                d="M9.99943 11.2C9.51188 11.2 9.02238 11.0667 8.59748 10.8019L8.5407 10.7635L4.3329 7.65675C3.95304 7.37731 3.88842 6.86226 4.18996 6.50976C4.48954 6.15544 5.0417 6.09699 5.4196 6.37643L9.59412 9.45943C9.84279 9.60189 10.1561 9.60189 10.4067 9.45943L14.5812 6.37643C14.9591 6.09699 15.5113 6.15544 15.8109 6.50976C16.1104 6.86409 16.0478 7.37731 15.6679 7.65675L11.4014 10.8019C10.9765 11.0667 10.487 11.2 9.99943 11.2Z"
                fill="currentColor"></path>
            </svg>
            <span class="right-entry-text">消息</span>
          </router-link>
          <div class="v-popover 
                    message-popover-is-bottom" v-show="showMessagePopover">
            <div class="v-popover-content">
              <div class="message-entry-popover">
                <div class="message-inner-list">
                  <router-link class="message-inner-list__item" to="/message-center/replies" target="_blank"
                   >
                    回复我的
                    <span class="message-inner-list__item--num">2</span>
                  </router-link>
                  <router-link class="message-inner-list__item" to="/message-center/likes" target="_blank"
                    >
                    收到的赞
                    <span class="message-inner-list__item--num">2</span>
                  </router-link>
                </div>
              </div>
            </div>
          </div>

        </li>
        <!-- 动态 -->
        <li class="v-popover-wrap right-entry__outside">
          <div class="red-num--message">2</div>
          <router-link title="动态" to="/moments" target="_blank" class="right-entry__outside">
            <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"
              class="right-entry-icon">
              <g clip-path="url(#clip0)">
                <path
                  d="M10 10.743C7.69883 10.743 5.83333 8.87747 5.83333 6.5763C5.83333 4.27512 7.69883 2.40964 10 2.40964V10.743Z"
                  stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path>
                <path
                  d="M10 10.743C10 13.0441 8.1345 14.9096 5.83333 14.9096C3.53217 14.9096 1.66667 13.0441 1.66667 10.743H10Z"
                  stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path>
                <path
                  d="M10 10.743C10 8.44182 11.8655 6.57632 14.1667 6.57632C16.4679 6.57632 18.3333 8.44182 18.3333 10.743H10Z"
                  stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path>
                <path
                  d="M9.99999 10.743C12.3012 10.743 14.1667 12.6085 14.1667 14.9096C14.1667 17.2108 12.3012 19.0763 9.99999 19.0763V10.743Z"
                  stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path>
              </g>
              <defs>
                <clipPath id="clip0">
                  <rect width="20" height="20" fill="currentColor" transform="matrix(-1 0 0 1 20 0.742981)"></rect>
                </clipPath>
              </defs>
            </svg>
            <span class="right-entry-text">动态</span>
          </router-link>
          <div class="v-popover moment-popover-is-bottom" style="display: none;">
            <div class="v-popover-content">
              <div class="dynamic-panel-popover">
                <!-- <div class="message-inner-list">
                                    <a class="message-inner-list__item" href="/message-center/replies"
                                        target="_blank">回复我的
                                        <span class="message-inner-list__item--num">2</span>
                                    </a>
                                    <a class="message-inner-list__item" href="/message-center/likes"
                                        target="_blank">收到的赞
                                        <span class="message-inner-list__item--num">2</span>
                                    </a>
                                </div> -->
              </div>
            </div>
          </div>
        </li>
        <!-- 发布中心 -->
        <li class="right-entry-item">
          <router-link title="创作中心" to="/activity-manage/content" target="_blank" class="right-entry__outside">
            <i class="iconfont icon-fabuzhongxin_gongzuotai right-entry-icon"></i>
            <span class="right-entry-text">创作中心</span>

          </router-link>
        </li>
        <!-- 发布活动 -->
        <li class="right-entry-item right-entry-item--upload">
          <div class="v-popover-wrap">
            <router-link title="发布活动" to="/publish-activity" target="_blank">
              <div class="header-upload-entry">
                <!-- <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"
                class="header-upload-entry__icon">
                <path
                  d="M12.0824 10H14.1412C15.0508 10 15.7882 10.7374 15.7882 11.6471V12.8824C15.7882 13.792 15.0508 14.5294 14.1412 14.5294H3.84707C2.93743 14.5294 2.20001 13.792 2.20001 12.8824V11.6471C2.20001 10.7374 2.93743 10 3.84707 10H5.90589"
                  stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8.99413 11.2353L8.99413 3.82353" stroke="currentColor" stroke-width="1.7"
                  stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M12.0823 6.29413L8.9941 3.20589L5.90587 6.29413" stroke="currentColor" stroke-width="1.7"
                  stroke-linecap="round" stroke-linejoin="round">
                </path>
              </svg> -->
                <i class="iconfont icon-yumaobi header-upload-entry__icon "></i>
                <span class="header-upload-entry__text">发布活动</span>
              </div>
            </router-link>
          </div>
        </li>


      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@keyframes jump {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes slideDown {
  0% {
    top: -64px;
  }

  100% {
    top: 0;
  }

}

@media (max-width: 1279.9px) {
  .right-entry__outside .right-entry-text {
    display: none;
  }

  .bili_header .header__bar .right-entry-item--upload .header-upload-entry {
    width: 34px;

    .header-upload-entry__icon {
      margin-right: 0px;

    }

    .header-upload-entry__text {
      display: none;
    }
  }
}

/*
1. 使用绝对定位 + 左右间距自动分配
将中间搜索框设为绝对定位，并通过 left: 0; right: 0; margin: auto 实现视觉居中，同时保留两侧 Flex 布局的对齐效果：

HTML
<div :class="{ 'header__bar': true }" style="position: relative;">
  <ul class="left_entry" style="margin-right: auto;">左侧条目</ul>
  <div class="center_search_container" style="position: absolute; left: 0; right: 0; margin: 0 auto; width: fit-content;">搜索框</div>
  <ul class="right_entry" style="margin-left: auto;">右侧条目</ul>
</div>
原理：

margin-right: auto 和 margin-left: auto 会挤压中间空间，使两侧元素紧贴边缘。
绝对定位的搜索框不受 Flex 空间分配影响，通过 left/right: 0 和 margin: auto 实现居中 


2. 为中间元素分配固定宽度 + Flex 伸缩
为中间搜索框设置固定宽度，并禁止伸缩，两侧元素通过 flex: 1 平分剩余空间：

CSS
.header__bar {
  display: flex;
  align-items: center;
}
.left_entry, .right_entry {
  flex: 1;  /~ 平分剩余空间 ~/
}
.center_search_container {
  width: 300px; /~ 固定宽度 ~/
  flex-shrink: 0; /~ 禁止收缩 ~/
}
适用场景：中间搜索框宽度固定，两侧条目动态伸缩 
*/


.bili_header {
  background-color: #fff;
  min-height: 64px;
  position: relative;
  margin: 0 auto;
  max-width: 2560px;
  width: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08);

  .header__bar {
    position: absolute;
    top: 0;
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    max-width: 2560px;
    width: 100%;
    height: 64px;
    box-shadow: inset 0 -1px 0 #e3e5e7 !important;

    .left_entry {
      flex: 1;
      display: flex;
      align-items: center;

      .homepage {
        display: flex;
        align-items: center;
        margin-right: 10px;

        .icon-shouye {
          margin-right: 6px;
          font-weight: bold;
        }
      }

      .logo {
        width: 100px;

        a {
          height: 64px;
          display: block;
          font-size: 0;
          margin-right: 10px;
          background-image: url(../assets/new11.png);
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
        }
      }

      .employ_analysis {
        margin-right: 10px;
        color: #18191c;

        a {
          display: inline-block;

          &:hover {
            animation: jump .4s;
          }


        }
      }
    }

    .center_search_container {
      margin: 0 10px;
      height: 38px;

      width: 40%;
      flex-shrink: 0;


      .center-search__bar {
        position: relative;
        margin: 0 auto;
        min-width: 181px;
        max-width: 500px;

        &.is-focus {
          box-shadow: 0 0 30px rgba(0, 0, 0, .1);
          border-radius: 8px;
        }

        .nav-searchform {
          border-radius: 8px;
          background-color: #f1f2f3;
          display: flex;
          align-items: center;
          padding: 0 48px 0 4px;
          position: relative;
          z-index: 1;
          overflow: hidden;
          line-height: 38px;
          border: 1px solid #e3e5e7;
          height: 40px;
          opacity: .9;
          transition: background-color .3s;


          /*    &:focus-within {
            border: 1px solid #e3e5e7;
            border-bottom: none;
            background: #fff;
          } */
          &:hover {
            opacity: 1;
            border: 1px solid #e3e5e7;
            background: #fff;
          }

          &.is-focus {
            border: 1px solid #e3e5e7;
            border-bottom: none;
            background: #fff;
            border-radius: 8px 8px 0px 0px;

            .nav-search-content {
              background-color: #e3e5e7;
            }
          }

          .nav-search-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            padding: 0 8px;
            width: 100%;
            height: 32px;
            border: 2px solid transparent;
            border-radius: 6px;

            &:focus {
              background-color: #e3e5e7;
            }

            &:focus-within {
              background-color: #e3e5e7;
            }

            .nav-search-input {
              flex: 1;
              overflow: hidden;
              padding-right: 8px;
              border: none;
              background-color: transparent;
              box-shadow: none;
              color: #61666d;
              font-size: 14px;
              line-height: 20px;


              &:focus {
                outline: none;
                background-color: #e3e5e7;
                color: #000;
              }
            }

            .nav-search-clean {
              width: 16px;
              height: 16px;
              right: 10px;
              cursor: pointer;
              visibility: hidden;

              &:hover svg path {
                fill: #61666d;
              }

              &.has-keyword {
                visibility: inherit;
              }

              svg {
                position: absolute;
                color: #c9ccd0;
              }
            }
          }

          .nav-search-btn {
            position: absolute;
            top: 3px;
            right: 7px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            padding: 0;
            width: 32px;
            height: 32px;
            border: none;
            border-radius: 6px;
            color: #18191c;
            line-height: 32px;
            cursor: pointer;
            transition: background-color .3s;

            &:hover {
              background-color: #e3e5e7;
            }
          }



        }

        .search_panel {
          width: 100%;
          max-height: 612px;
          overflow-y: auto;
          background: #fff;
          border: 1px solid #e3e5e7;
          border-top: none;
          border-radius: 0 0 8px 8px;
          padding: 13px 0 16px;
          -webkit-font-smoothing: antialiased;

          .history {
            .header {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 0 16px;

              .title {
                height: 24px;
                font-size: 16px;
                line-height: 24px;
                color: #18191c;
                font-family: PingFang SC, HarmonyOS_Medium, Helvetica Neue, Microsoft YaHei, sans-serif;
                font-weight: 600;
              }

              .clear {
                font-size: 12px;
                line-height: 15px;
                height: 15px;
                color: #9499a0;
                cursor: pointer;
              }


            }

            .histories-wrap {
              padding: 0 16px;
              overflow: hidden;
              transition: max-height 0.3s ease;

              .histories {
                display: flex;
                flex-wrap: wrap;
                margin-top: 12px;
                margin-right: -10px;
                margin-bottom: 4px;

                .history-item {
                  position: relative;
                  box-sizing: border-box;
                  height: 30px;
                  padding: 7px 10px 8px;
                  font-size: 12px;
                  line-height: 15px;
                  background: #f6f7f8;
                  border-radius: 4px;
                  margin-right: 10px;
                  margin-bottom: 10px;
                  cursor: pointer;

                  &:hover {
                    outline: none;
                    color: #00aeec;

                    .close {
                      display: block;
                    }
                  }

                  .history-text {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 96px;
                  }

                  .close {
                    display: none;
                    box-sizing: border-box;
                    position: absolute;
                    width: 16px;
                    height: 16px;
                    top: -6px;
                    right: -6px;
                    padding: 2px;

                    svg {
                      width: 14px;
                      height: 14px;
                      fill: #ccc;
                    }
                  }
                }
              }
            }

            .history-fold-wrap {

              display: flex;
              align-items: center;
              justify-content: center;
              width: 64px;
              margin: 0 auto 14px;

              &:hover {
                .fold-text {
                  color: #00aeec;
                }

                .fold-icon {
                  fill: #00aeec;
                }
              }

              .fold-text {
                font-size: 12px;
                line-height: 15px;
                height: 15px;
                color: #9499a0;
                cursor: pointer;
              }

              .fold-icon {
                width: 12px;
                height: 12px;
                fill: #9499a0;
                cursor: pointer;
                transform: rotate(180deg);
                margin-left: 2px;
                transition: transform 0.3s;

                &.fold {
                  transform: rotate(0deg);
                }
              }
            }

          }
        }
      }
    }

    .right_entry {
      flex: 1;
      margin-left: 10px;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .right-entry__outside {
        display: flex;
        align-items: center;
        flex-direction: column;
        flex-shrink: 0;
        margin-right: 0;
        min-width: 50px;
        text-align: center;
        font-size: 13px;
        cursor: pointer;

        .right-entry-icon:hover {
          animation: jump .3s;
        }

        .right-entry-text {
          color: #61666d;
        }
      }

      .v-popover-wrap {
        position: relative;

        /* 显示时的状态 */
        &:hover .v-popover {
          opacity: 1;
          transform: translate3d(-50%, 0, 0);
          /* 最终位置 */
        }

        &:hover .v-popover-content {
          transform: translateY(0);
          /* 取消微调 */
        }


        .red-num--message {
          position: absolute;
          top: -6px;
          left: 25px;
          z-index: 1;
          padding: 0 3px;
          min-width: 15px;
          border-radius: 10px;
          background-color: #fa5a57;
          color: #fff;
          font-size: 12px;
          line-height: 15px;
        }
      }

      .v-popover {
        position: absolute;
        top: 100%;
        left: 50%;
        // transition: .3s;
        z-index: 1;
        // transform: translate3d(-50%, 0, 0);

        transform: translate3d(-50%, 10px, 0);
        /* 初始位置下移 10px */
        transition: all 0.3s ease;
        /* 过渡效果 */
        // pointer-events: none;
        /* 防止鼠标事件干扰 */

        .v-popover-content {
          position: relative;
          background-color: #fff;
          box-shadow: 0 0 30px rgba(0, 0, 0, .1);
          border-radius: 8px;
          border: 1px solid #e3e5e7;
          color: #18191c;

          transform: translateY(-5px);
          /* 初始微调 */
          transition: inherit;
          /* 继承父级过渡 */

        }


      }

      .avatar-popover-is-bottom {
        padding-top: 12px;
        margin-left: -12px;

        &:hover {
          // background-color: pink;
        }

      }

      .message-popover-is-bottom {
        padding-top: 15px;
        margin-left: 0px;
      }

      .moment-popover-is-bottom {
        padding-top: 15px;
        margin-left: 0px;
      }


      .header-avatar-wrap {
        position: relative;
        box-sizing: content-box;
        padding-right: 10px;
        width: 50px;
        height: 50px;
        cursor: pointer;

        .header-avatar-wrap--container {
          position: relative;
          z-index: 2;

          .bili-avatar {
            box-sizing: content-box;
            border: 2px solid #fff;
          }

        }

        //小头像
        .header-entry-mini {
          background-color: pink;
          position: absolute;
          top: 5px;
          left: 10px;
          z-index: 2;
          display: block;
          width: 38px;
          height: 38px;
          border-radius: 50%; // 圆形
          animation: fadeOut .3s both;

          img {
            border: 2px solid #fff;
            border-radius: 50%;
            object-fit: inherit;
          }
        }

        //大头像
        .header-entry-avatar {
          position: absolute;
          top: 5px;
          left: 10px;
          z-index: 2;
          display: block;
          border-radius: 50%;
          transform-origin: top left;

        }



        @keyframes fadeIn {
          0% {
            opacity: 0;
          }

          100% {
            opacity: 1;
          }
        }

        @keyframes fadeOut {
          0% {
            opacity: 1;
          }

          100% {
            opacity: 0;
          }
        }

        @keyframes avatarFadeSmall {
          0% {
            transform: scale(1) translate(-36px, 10px);
          }

          60% {
            opacity: 1;
          }

          100% {
            opacity: 0;
            transform: scale(.4) translateY(-2px) translate(3px);
          }
        }

        @keyframes avatarFadeLarge {
          0% {
            opacity: 0;
            transform: scale(.4) translateY(-2px) translate(3px);
          }

          30% {
            opacity: 1;
          }

          100% {
            opacity: 1;
            transform: scale(1) translate(-36px, 10px);
          }
        }

        .mini-avatar--small .header-entry-mini {
          animation: fadeIn .6s both;
        }

        .mini-avatar--small .header-entry-avatar {
          animation: avatarFadeSmall .35s both;
        }

        .mini-avatar--large .header-entry-mini {
          animation: fadeOut .3s both;
        }

        .mini-avatar--large .header-entry-avatar {
          animation: avatarFadeLarge .35s both;
        }


      }




      .avatar-panel-popover {
        padding: 0 24px 18px;
        width: 300px;
        border-radius: 8px;
        background-color: #fff;

        .avatar-top-space {
          height: 35px; // 留出顶部空间
          margin-bottom: 10px;
        }

        .user-nickname {
          text-align: center;
          font-size: 18px;
          font-weight: 550;
          margin-bottom: 10px;
          color: #18191c;
        }

        .links-item {
          list-style: none;
          padding: 0;
          margin: 0;

          .single-link-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 2px;
            padding: 0 14px;
            height: 38px;
            border-radius: 8px;
            color: #61666d;
            font-size: 14px;
            cursor: pointer;
            transition: background-color .3s;
            white-space: nowrap;

            &:hover {
              background-color: #e3e5e7;
            }

            .link-title {
              display: flex;
              align-items: center;


              .link-icon {
                margin-right: 16px;
              }

              .icon-huodong_huodongguanli {
                margin-right: 16px;
                font-size: 19px;
              }

              .icon-wodebaoming1 {
                color: #61666d;
                margin-right: 5px;
                font-size: 29px;
                transform: translateX(-3px);
              }
            }

            .link-icon--right {
              transform: rotate(-90deg);
            }

          }

          .split-line {
            margin: 10px 0;
            width: 100%;
            height: 1px;
            background: #e3e5e7;
          }

          .logout-item {
            display: flex;
            align-items: center;
            padding: 10px 14px;
            border-radius: 8px;
            color: #61666d;
            font-size: 14px;
            cursor: pointer;
            transition: background-color .3s;

            &:hover {
              background-color: #e3e5e7;
            }

            .link-icon {
              margin-right: 16px;
            }
          }

        }

        /*    margin-bottom: 10px;

                a,
                router-link {
                  text-align: center;
                  display: block;
                  padding: 0 10px;
                  border-radius: 4px;
                  color: #61666d;
                  font-size: 14px;
                  text-decoration: none;
                  transition: background-color 0.3s;

                  &:hover {
                    background-color: #f1f2f3;
                  }
                } */
      }
    }



    .right-entry--message {
      position: relative;

      .red-num--message {
        position: absolute;
        top: -6px;
        left: 25px;
        z-index: 1;
        padding: 0 3px;
        min-width: 15px;
        border-radius: 10px;
        background-color: #fa5a57;
        color: #fff;
        font-size: 12px;
        line-height: 15px;
      }

      .message-entry-popover {
        overflow: hidden;
        width: 142px;
        border-radius: 8px;

        .message-inner-list {
          display: flex;
          flex-direction: column;
          padding: 12px 0;

          .message-inner-list__item {
            position: relative;
            display: flex;
            align-items: center;
            padding: 10px 0 10px 27px;
            color: #61666d;
            text-align: left;
            font-size: 14px;
            transition: background-color .3s;

            &:hover {
              background-color: #e3e5e7;
            }

            .message-inner-list__item--num {
              position: absolute;
              right: 17px;
              padding: 0 5px;
              border-radius: 8px;
              background: #fa5a57;
              color: #fff;
              font-size: 12px;
              line-height: 16px;
            }
          }
        }
      }

      .dynamic-panel-popover {
        width: 370px;
      }


    }

    .right-entry-item {
      display: block;
      flex-shrink: 0;
      margin-right: 4px;
      min-width: 50px;
      text-align: center;
      // background-color: pink;

      .right-entry-icon {
        color: #18191c;
      }

      .icon-fabuzhongxin_gongzuotai {
        display: inline-block;
        vertical-align: top;
        margin-bottom: -7px;
        margin-top: -6px;
        font-size: 23px;
      }

      // .publish-text {
      //   color: #61666d;
      // }    


    }

    .right-entry-item--upload {
      margin: 0;
      min-width: 0;

    }

    .header-upload-entry {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 16px;
      width: 90px;
      height: 34px;
      border-radius: 8px;
      background-color: rgba(0, 174, 236);
      color: #fff;
      text-align: center;
      font-size: 14px;
      line-height: 20px;
      cursor: pointer;
      transition: background-color .3s;

      &:hover {
        background-color: rgba(0, 199, 254);
      }

      .header-upload-entry__icon {
        margin-right: 5px;
        color: #fff;
      }

    }
  }

}

.bili-avatar {


  display: block;
  position: relative;
  background-image: url();
  background-size: cover;
  border-radius: 50%;
  margin: 0;
  padding: 0;

  width: 82px;
  height: 82px;
  transform: translate(0px, 0px);

  .bili_avatar_img {
    top: 0;
    left: 0;
    transform: translateZ(0);
    will-change: transform;
    border-radius: 50%;
    border: none;
    display: block;
    object-fit: cover;
    image-rendering: -webkit-optimize-contrast;
    position: absolute;
    width: 100%;
    height: 100%;
  }
}

.bili_header .slide_down {
  position: fixed;
  top: 0;
  background-color: #fff;
  box-shadow: inset 0 -1px 0 #e3e5e7 !important;
  transition: transform 0.3s ease; // 使用transform实现更流畅的动画
  animation: slideDown 0.3s forwards; // 添加下滑动画

}
</style>